<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="路径" prop="apiPath">
        <el-input
          v-model="queryParams.apiPath"
          placeholder="请输入请求路径"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="名称" prop="apiName">
        <el-input
          v-model="queryParams.apiName"
          placeholder="请输入名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="动作" prop="apiAction">
        <el-select
          v-model="queryParams.apiAction"
          placeholder="动作"
          clearable filterable>
          <el-option v-for="(item, index) in apiActionOptions"
                     :key="index"
                     :label="item.dictLabel"
                     :value="item.dictValue"
                     :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分组" prop="apiGroup">
        <el-select
          v-model="queryParams.apiGroup"
          placeholder="所属组"
          clearable filterable>
          <el-option v-for="(item, index) in apiGroupOptions"
                     :key="index"
                     :label="item.dictLabel"
                     :value="item.dictValue"
                     :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="版本" prop="apiVersion">
        <el-select
          v-model="queryParams.apiVersion"
          placeholder="所属版本"
          clearable filterable>
          <el-option v-for="(item, index) in apiVersionOptions"
                     :key="index"
                     :label="item.dictLabel"
                     :value="item.dictValue"
                     :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发布" prop="apiPublish">
        <el-select
          v-model="queryParams.apiPublish"
          placeholder="发布状态"
          clearable>
          <el-option v-for="(item, index) in apiPublishOptions"
                     :key="index"
                     :label="item.label"
                     :value="item.value"
                     :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="用户状态"
          clearable>
          <el-option
            v-for="dict in dict.type.sys_normal_disable"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['generation:info:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['generation:info:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['generation:info:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['generation:info:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="debugApiInterface"
          v-hasPermi="['generation:info:debug']"
        >调试</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="id" />
      <el-table-column label="动作" align="center" prop="apiAction" :formatter="formatApiAction"/>
      <el-table-column label="路径" align="center" prop="apiPath" />
      <el-table-column label="名称" align="center" prop="apiName" />
      <el-table-column label="类型" align="center" prop="apiType" />
      <el-table-column label="分组" align="center" prop="apiGroup" :formatter="formatApiGroup"/>
      <el-table-column label="版本" align="center" prop="apiVersion" :formatter="formatApiVersion"/>
      <el-table-column label="请求头" align="center" prop="apiHeader" :formatter="formatapiHeader"/>
      <el-table-column label="说明" align="center" prop="apiIllustrate" />
      <el-table-column label="发布" align="center" prop="apiPublish" :formatter="formatApiPublish"/>
      <el-table-column label="状态" align="center" key="status" v-if="columns[10].visible">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-value="0"
              inactive-value="1"
              @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="entryAndExitGinseng(scope.row)"
            v-hasPermi="['generation:info:info']"
          >出入参</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['generation:info:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="debugApiInterface(scope.row)"
            v-hasPermi="['generation:info:debug']"
          >调试</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['generation:info:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改api服务信息对话框 -->
    <el-dialog v-if="currentStep === 1" :title="title" :visible.sync="open" width="500px" append-to-body class="hide-close-button">
      <el-form ref="step1Data" :model="formData.step1Data" :rules="step1DataRules" label-width="80px">
        <el-form-item label="动作" prop="apiAction">
          <el-select v-model="formData.step1Data.apiAction" placeholder="请选择API动作" clearable filterable :style="{width: '100%'}">
            <el-option v-for="(item, index) in apiActionOptions" :key="index" :label="item.dictLabel"
                       :value="item.dictValue" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路径" prop="apiPathShow">
          <el-input v-model="formData.step1Data.apiPathShow" placeholder="请输入API路径" :maxlength="50" show-word-limit clearable :style="{width: '100%'}">
            <template slot="prepend">{{api_path_prefix}}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="名称" prop="apiName">
          <el-input v-model="formData.step1Data.apiName" placeholder="请输入API名称" :maxlength="50" show-word-limit clearable/>
        </el-form-item>
        <el-form-item label="类型" prop="apiType">
          <el-select v-model="formData.step1Data.apiType" placeholder="请选择请求类型" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in apiTypeOptions" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分组" prop="apiGroup">
          <el-select v-model="formData.step1Data.apiGroup" placeholder="请选择所属组" clearable filterable :style="{width: '100%'}">
            <el-option v-for="(item, index) in apiGroupOptions" :key="index" :label="item.dictLabel"
                       :value="item.dictValue" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本" prop="apiVersion">
          <el-select v-model="formData.step1Data.apiVersion" placeholder="请选择API版本" clearable filterable :style="{width: '100%'}">
            <el-option v-for="(item, index) in apiVersionOptions" :key="index" :label="item.dictLabel"
                       :value="item.dictValue" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求头" prop="apiHeader">
          <el-select v-model="formData.step1Data.apiHeader" placeholder="请选择是否启用" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in apiHeaderOptions" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="apiIllustrate">
          <el-input v-model="formData.step1Data.apiIllustrate" type="textarea" placeholder="请输入API描述" :maxlength="200" show-word-limit
                    :autosize="{minRows: 2, maxRows: 4}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveStep1DataAndNext">下一步</el-button>
        <el-button @click="step1Cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改api入参对话框 -->
    <el-dialog v-if="currentStep === 2" :title="title" :visible.sync="open" width="1200px" append-to-body class="hide-close-button">
      <el-form ref="step2Data" :model="formData.step2Data" size="medium" label-width="100px">
        <!-- 使用 v-for 循环渲染参数列表 -->
        <div v-for="(paramet, index) in inputParameterList" :key="index">
          <el-row type="flex" justify="start" align="top">
            <el-form-item label="参数">
              <span class="required-label">* </span>
              <el-input v-model="paramet.parameter" placeholder="请输入参数" :maxlength="20" show-word-limit clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="参数类型">
              <span class="required-label">* </span>
              <el-select v-model="paramet.parameterType" placeholder="请选择参数类型" clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, idx) in parameterTypeOptions" :key="idx" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="参数名称">
              <span class="required-label">* </span>
              <el-input v-model="paramet.parameterName" placeholder="请输入参数名称" :maxlength="20" show-word-limit clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="是否必传" >
              <span class="required-label">* </span>
              <el-select v-model="paramet.isMandatory" placeholder="请选择是否必传" clearable :style="{width: '100%'}">
                <el-option v-for="(item, idx) in isMandatoryOptions" :key="idx" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <!-- 添加删除图标按钮 -->
            <el-form-item>
              <el-button icon="el-icon-delete" @click="removeInputParameter(index)" circle></el-button>
            </el-form-item>
          </el-row>
        </div>
        <el-form-item>
          <el-button type="primary" size="medium" @click="addInputParameter"> 添加参数 </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="saveStep2DataAndUp">上一步</el-button>
        <el-button type="primary" @click="saveStep2DataAndNext">下一步</el-button>
        <el-button @click="step2Cancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- 新增执行表单-->
    <el-dialog v-if="currentStep === 3 && apiAction=='CREATE'" :title="title" :visible.sync="open" width="1200px" append-to-body class="hide-close-button">
      <el-form ref="step3AddData" :model="formData.step3AddData" :rules="step3AddDataRules" size="medium" label-width="100px">
        <el-row type="flex" justify="start" align="top">
          <el-form-item label="数据库类型" prop="databaseType">
            <el-select v-model="formData.step3AddData.databaseType" @change="onDatabaseTypeChange" placeholder="请选择数据库类型" clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in databaseTypeOptions" :key="index" :label="item.dictLabel"
                         :value="item.dictLabel" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据库名" prop="databaseName">
            <el-select v-model="formData.step3AddData.databaseName" @change="onDatabaseNameChange"  placeholder="请选择数据库名" clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in databaseNameOptions" :key="index" :label="item.dbname"
                         :value="item.dbname" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表名" prop="tableName">
            <el-select v-model="formData.step3AddData.tableName" @change="onTableNameChange" placeholder="请选择表名" clearable filterable :style="{width: '100%'}">
              <el-option v-for="(item, index) in tableNameOptions" :key="index" :label="item.name"
                         :value="item.name" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item label="添加字段:">
        </el-form-item>
        <!-- 使用 v-for 循环渲染新增字段列表 -->
        <div v-for="(paramet, index) in addFieldParameterList" :key="index">
          <el-row type="flex" justify="start" align="top">
            <el-form-item label="字段名">
              <span class="required-label">* </span>
              <el-select v-model="paramet.fieldName" placeholder="请选择字段名" :maxlength="20" show-word-limit clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, index) in columnNameOptions" :key="index" :label="item.columnname"
                           :value="item.columnname" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值来源">
              <span class="required-label">* </span>
              <el-select v-model="paramet.valueSource" placeholder="请选择值来源"  :style="{width: '100%'}">
                <el-option v-for="(item, index) in valueSourceOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值">
              <span class="required-label">* </span>
              <el-select v-model="paramet.parameter" placeholder="请选择值" :maxlength="20" show-word-limit clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, index) in enteringGinsengOptions" :key="index" :label="item.parameterName"
                           :value="item.parameter" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <!-- 添加删除图标按钮 -->
            <el-form-item>
              <el-button icon="el-icon-delete" @click="removeAddFieldParameter(index)" circle></el-button>
            </el-form-item>
          </el-row>
        </div>
        <el-form-item>
          <el-button type="primary" size="medium" @click="addFieldParameter"> 添加字段 </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="saveStep3DataAndUp">上一步</el-button>
        <el-button type="primary" @click="step3AddComplete">完成</el-button>
        <el-button type="primary" @click="step3AddDataCancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- 修改执行表单-->
    <el-dialog v-if="currentStep === 3 && apiAction=='UPDATE'" :title="title" :visible.sync="open" width="1200px" append-to-body class="hide-close-button">
      <el-form ref="step3UpdateData" :model="formData.step3UpdateData" :rules="step3UpdateDataRules" size="medium" label-width="100px">
        <el-row type="flex" justify="start" align="top">
          <el-form-item label="数据库类型" prop="databaseType">
            <el-select v-model="formData.step3UpdateData.databaseType" @change="onDatabaseTypeChange" placeholder="请选择数据库类型" clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in databaseTypeOptions" :key="index" :label="item.dictLabel"
                         :value="item.dictLabel" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据库名" prop="databaseName">
            <el-select v-model="formData.step3UpdateData.databaseName" @change="onDatabaseNameChange"  placeholder="请选择数据库名" clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in databaseNameOptions" :key="index" :label="item.dbname"
                         :value="item.dbname" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表名" prop="tableName">
            <el-select v-model="formData.step3UpdateData.tableName" @change="onTableNameChange" placeholder="请选择表名" clearable filterable :style="{width: '100%'}">
              <el-option v-for="(item, index) in tableNameOptions" :key="index" :label="item.name"
                         :value="item.name" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item label="条件字段:">
        </el-form-item>
        <!-- 使用 v-for 循环渲染新增条件 -->
        <div v-for="(paramet, index) in conditionalFieldParameterList" :key="index">
          <el-row type="flex" justify="start" align="top">
            <el-form-item label="左值字段">
              <span class="required-label">* </span>
              <el-select v-model="paramet.fieldName" placeholder="请选择字段名" clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, index) in columnNameOptions" :key="index" :label="item.columnname"
                           :value="item.columnname" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="条件判断">
              <span class="required-label">* </span>
              <el-select v-model="paramet.conditionType" placeholder="请选择条件" clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, index) in conditionTypeOptions" :key="index" :label="item.dictLabel"
                           :value="item.dictValue" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="右值来源">
              <span class="required-label">* </span>
              <el-select v-model="paramet.valueSource" placeholder="请选择值来源"  :style="{width: '100%'}">
                <el-option v-for="(item, index) in valueSourceOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值">
              <span class="required-label">* </span>
              <el-select v-model="paramet.parameter" placeholder="请选择值" clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, index) in enteringGinsengOptions" :key="index" :label="item.parameterName"
                           :value="item.parameter" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="逻辑运算">
              <span class="required-label">* </span>
              <el-select v-model="paramet.logicalType" placeholder="请选择逻辑运算" clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, index) in logicalTypeOptions" :key="index" :label="item.dictLabel"
                           :value="item.dictValue" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <!-- 添加删除图标按钮 -->
            <el-form-item>
              <el-button icon="el-icon-delete" @click="removeConditionalField(index)" circle></el-button>
            </el-form-item>
          </el-row>
        </div>
        <el-form-item>
          <el-button type="primary" size="medium" @click="addConditionalField"> 添加条件 </el-button>
        </el-form-item>

        <el-form-item label="更新字段:">
        </el-form-item>
        <!-- 使用 v-for 循环渲染新增字段列表 -->
        <div v-for="(paramet, index) in updateFieldParameterList" :key="`updateFieldParameterList_${index}`">
          <el-row type="flex" justify="start" align="top">
            <el-form-item label="字段名">
              <span class="required-label">* </span>
              <el-select v-model="paramet.fieldName" placeholder="请选择字段名" clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, index) in columnNameOptions" :key="index" :label="item.columnname"
                           :value="item.columnname" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值来源">
              <span class="required-label">* </span>
              <el-select v-model="paramet.valueSource" placeholder="请选择值来源"  :style="{width: '100%'}">
                <el-option v-for="(item, index) in valueSourceOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值">
              <span class="required-label">* </span>
              <el-select v-model="paramet.parameter" placeholder="请选择值"  clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, index) in enteringGinsengOptions" :key="index" :label="item.parameterName"
                           :value="item.parameter" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <!-- 添加删除图标按钮 -->
            <el-form-item>
              <el-button icon="el-icon-delete" @click="removeUpdateFieldParameter(index)" circle></el-button>
            </el-form-item>
          </el-row>
        </div>
        <el-form-item>
          <el-button type="primary" size="medium" @click="addUpdateFieldParameter"> 添加字段 </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="saveStep3DataAndUp">上一步</el-button>
        <el-button type="primary" @click="step3UpdateComplete">完成</el-button>
        <el-button type="primary" @click="step3UpdateDataCancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- 查询执行表单-->
    <el-dialog v-if="currentStep === 3 && apiAction=='SELECT'" :title="title" :visible.sync="open" width="1200px" append-to-body class="hide-close-button">
      <el-form ref="step3SelectData" :model="formData.step3SelectData" :rules="step3SelectDataRules" size="medium" label-width="100px">
        <el-row type="flex" justify="start" align="top">
          <el-form-item label="数据库类型" prop="databaseType">
            <el-select v-model="formData.step3SelectData.databaseType" placeholder="请选择数据库类型" clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in databaseTypeOptions" :key="index" :label="item.dictLabel"
                         :value="item.dictLabel" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item label="查询sql语句" prop="sqlStatement">
          <el-input v-model="formData.step3SelectData.sqlStatement" type="textarea"
                    :placeholder="placeholderText"
                    :maxlength="1000" :autosize="{minRows: 10, maxRows: 18}" :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <span :style="{ color: 'red',whitespace: 'pre-line'}">
        出参格式：字段A字、字段别名B<br>
        入参格式：@条件A<br>
        分页格式：LIMIT默认第1页,每页10条<br>
      </span>
      <div slot="footer">
        <el-button type="primary" @click="saveStep3DataAndUp">上一步</el-button>
        <el-button type="primary" @click="step3SelectDataNext">下一步</el-button>
        <el-button type="primary" @click="step3SelectDataCancel">取消</el-button>
      </div>
    </el-dialog>


    <!-- 导出执行表单-->
    <el-dialog v-if="currentStep === 3 && apiAction=='EXPORT'" :title="title" :visible.sync="open" width="1200px" append-to-body class="hide-close-button">
      <el-form ref="step3ExportData" :model="formData.step3ExportData" :rules="step3ExportDataRules" size="medium" label-width="100px">
        <el-row type="flex" justify="start" align="top">
          <el-form-item label="数据库类型" prop="databaseType">
            <el-select v-model="formData.step3ExportData.databaseType" placeholder="请选择数据库类型" clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in databaseTypeOptions" :key="index" :label="item.dictLabel"
                         :value="item.dictLabel" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item label="导出sql语句" prop="sqlStatement">
          <el-input v-model="formData.step3ExportData.sqlStatement" type="textarea"
                    :placeholder="placeholderText"
                    :maxlength="1000" :autosize="{minRows: 10, maxRows: 18}" :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <span :style="{ color: 'red',whitespace: 'pre-line'}">
        出参格式：字段A字、字段别名B<br>
        入参格式：@条件A<br>
        分页格式：LIMIT默认第1页,每页10条<br>
      </span>
      <div slot="footer">
        <el-button type="primary" @click="saveStep3DataAndUp">上一步</el-button>
        <el-button type="primary" @click="step3ExportDataNext">下一步</el-button>
        <el-button type="primary" @click="step3ExportDataCancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- 报表名称设置表单-->
    <el-dialog v-if="currentStep === 4 && apiAction=='EXPORT'" :title="title" :visible.sync="open" width="1200px" append-to-body class="hide-close-button">
      <el-form ref="step4ExportData" :model="reportNameFormatObject" :rules="step4ExportDataRules" size="medium" label-width="100px">
        <el-row type="flex" justify="start" align="top">
          <el-form-item label="前缀" prop="fixedValue">
            <el-input v-model="reportNameFormatObject.fixedValue" placeholder="请输入报表前缀" :maxlength="20" show-word-limit clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="后缀" prop="valueSource">
            <el-select v-model="reportNameFormatObject.valueSource" placeholder="请选择报表后缀" clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in valueSourceExportOptions" :key="index" :label="item.dictLabel"
                         :value="item.dictValue" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文件类型" prop="fileType">
            <el-select v-model="reportNameFormatObject.fileType" placeholder="请选择文件类型" clearable filterable :style="{width: '100%'}">
              <el-option v-for="(item, index) in fileTypeOptions" :key="index" :label="item.dictLabel"
                         :value="item.dictValue" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="step4ExportDataUp">上一步</el-button>
        <el-button type="primary" @click="step4ExportDataNext">下一步</el-button>
        <el-button type="primary" @click="step4ExportDataCancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- 报表api出参 -->
    <el-dialog v-if="currentStep === 5 && apiAction=='EXPORT'" :title="title" :visible.sync="open" width="1200px" append-to-body class="hide-close-button">
      <el-form ref="step5ExportData" :model="formData.step5ExportData" size="medium" label-width="100px">
        <!-- 使用 v-for 循环渲染参数列表 -->
        <div v-for="(paramet, index) in outParameterList" :key="index">
          <el-row type="flex" justify="start" align="top">
            <el-form-item label="出参字段">
              <span class="required-label">* </span>
              <el-input v-model="paramet.parameter" placeholder="请输入出参字段" :maxlength="20" show-word-limit clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="参数类型">
              <span class="required-label">* </span>
              <el-select v-model="paramet.parameterType" placeholder="请选择参数类型" clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, idx) in parameterTypeOptions" :key="idx" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报表字段">
              <span class="required-label">* </span>
              <el-input v-model="paramet.parameterName" placeholder="请输入报表字段" :maxlength="20" show-word-limit clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
            <!-- 添加删除图标按钮 -->
            <el-form-item>
              <el-button icon="el-icon-delete" @click="removeOutParameterList(index)" circle></el-button>
            </el-form-item>
          </el-row>
        </div>
        <el-form-item>
          <el-button type="primary" size="medium" @click="addOutParameter"> 添加出参 </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="step5ExportDataUp">上一步</el-button>
        <el-button type="primary" @click="step5ExportDataComplete">完成</el-button>
        <el-button @click="step5ExportDataCancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- 查询api出参 -->
    <el-dialog v-if="currentStep === 4 && apiAction=='SELECT'" :title="title" :visible.sync="open" width="1200px" append-to-body class="hide-close-button">
      <el-form ref="step4SelectData" :model="formData.step4SelectData" size="medium" label-width="100px">
        <!-- 使用 v-for 循环渲染参数列表 -->
        <div v-for="(paramet, index) in outParameterList" :key="index">
          <el-row type="flex" justify="start" align="top">
            <el-form-item label="出参字段">
              <span class="required-label">* </span>
              <el-input v-model="paramet.parameter" placeholder="请输入出参字段" :maxlength="20" show-word-limit clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="参数类型">
              <span class="required-label">* </span>
              <el-select v-model="paramet.parameterType" placeholder="请选择参数类型" clearable filterable :style="{width: '100%'}">
                <el-option v-for="(item, idx) in parameterTypeOptions" :key="idx" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字段说明">
              <el-input v-model="paramet.parameterName" placeholder="请输入参数名称" :maxlength="20" show-word-limit clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
            <!-- 添加删除图标按钮 -->
            <el-form-item>
              <el-button icon="el-icon-delete" @click="removeOutParameterList(index)" circle></el-button>
            </el-form-item>
          </el-row>
        </div>
        <el-form-item>
          <el-button type="primary" size="medium" @click="addOutParameter"> 添加出参 </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="step4SelectDataUp">上一步</el-button>
        <el-button type="primary" @click="step4SelectDataComplete">完成</el-button>
        <el-button @click="step4SelectDataCancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- API出入参 -->
    <el-dialog v-if="currentStep === 6" :title="title" :visible.sync="open" width="1100px" append-to-body>
      <el-form ref="step6Data" :model="formData.step6Data" size="medium" label-width="100px">
        <el-form-item label="API详情:"></el-form-item>
        <div class="with-background">
          <el-row type="flex" justify="start" align="top" >
            <div class="fixed-width">
              <el-form-item label="名称：">{{ formData.step6Data.apiName}}</el-form-item>
            </div>
            <div class="fixed-width">
              <el-form-item label="类型：">{{ formData.step6Data.apiType}}</el-form-item>
            </div>
            <div class="fixed-width">
              <el-form-item label="路径：">{{ formData.step6Data.apiPath}}</el-form-item>
            </div>
          </el-row>
          <el-row type="flex" justify="start" align="top">
            <div class="fixed-width">
              <el-form-item label="分组：">{{ getApiGroupOptions(formData.step6Data.apiGroup) }}</el-form-item>
            </div>
            <div class="fixed-width">
              <el-form-item label="版本：">{{ getApiVersionOptions(formData.step6Data.apiVersion) }}</el-form-item>
            </div>
            <div class="fixed-width">
              <el-form-item label="token：">{{ getapiHeaderOptions(formData.step6Data.apiHeader) }}</el-form-item>
            </div>
          </el-row>
        </div>
        <el-form-item label="API入参:"></el-form-item>
        <!-- 使用 v-for 循环渲染参数列表 -->
        <div v-for="(paramet, index) in inputParameterList" :key="index" class="with-background">
          <el-row type="flex" justify="start" align="top">
            <div class="fixed-width">
              <el-form-item label="入参：">{{ paramet.parameter }}</el-form-item>
            </div>
            <div class="fixed-width">
              <el-form-item label="类型：">{{ getParameterTypeOptions(paramet.parameterType) }}</el-form-item>
            </div>
            <div class="fixed-width">
              <el-form-item label="说明：" >
                <el-tooltip :content="paramet.parameterName" placement="top" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: block;">
                  <span>{{ paramet.parameterName }} </span>
                </el-tooltip>
              </el-form-item>
            </div>
            <div class="fixed-width">
              <el-form-item label="必传：">{{ getIsMandatoryOptions(paramet.isMandatory) }}</el-form-item>
            </div>
          </el-row>
        </div>
        <el-form-item label="API出参:"></el-form-item>
        <!-- 使用 v-for 循环渲染参数列表 -->
        <div v-for="(paramet, index) in outParameterList" :key="`outParameterList_${index}`" class="with-background">
          <el-row type="flex" justify="start" align="top">
            <div class="fixed-width">
              <el-form-item label="出参：">{{ paramet.parameter }}</el-form-item>
            </div>
            <div class="fixed-width">
              <el-form-item label="类型：">{{ getParameterTypeOptions(paramet.parameterType) }}</el-form-item>
            </div>
            <div class="fixed-width">
              <el-form-item label="说明：" >
                <el-tooltip :content="paramet.parameterName" placement="top" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: block;">
                  <span>{{ paramet.parameterName }} </span>
                </el-tooltip>
              </el-form-item>
            </div>
          </el-row>
        </div>
        <el-form-item label="响应码:"></el-form-item>
        <div v-for="(item, index) in responseCodes" :key="`responseCodes_${index}`" class="response-code with-background">
          <div class="code">{{ item.dictValue }}</div>
          <div class="description">{{ item.dictLabel }}</div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button @click="step6Cancel">关闭</el-button>
      </div>
    </el-dialog>

    <!-- API接口调试 -->
    <el-dialog v-if="currentStep === 7" :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="step7Data" :model="formData.step7Data" size="medium" label-width="100px">
        <el-form-item label="API详情:"></el-form-item>
        <el-row type="flex" justify="start" align="top" >
          <div class="fixed-width">
            <el-form-item label="名称：">{{ formData.step7Data.apiName}}</el-form-item>
          </div>
          <div class="fixed-width">
            <el-form-item label="类型：">{{ formData.step7Data.apiType}}</el-form-item>
          </div>
          <div class="fixed-width">
            <el-form-item label="路径：">{{ formData.step7Data.apiPath}}</el-form-item>
          </div>
        </el-row>
        <el-row type="flex" justify="start" align="top">
          <div class="fixed-width">
            <el-form-item label="分组：">{{ getApiGroupOptions(formData.step7Data.apiGroup) }}</el-form-item>
          </div>
          <div class="fixed-width">
            <el-form-item label="版本：">{{ getApiVersionOptions(formData.step7Data.apiVersion) }}</el-form-item>
          </div>
          <div class="fixed-width">
            <el-form-item label="请求头：">{{ getapiHeaderOptions(formData.step7Data.apiHeader) }}</el-form-item>
          </div>
        </el-row>
        <div v-if="requestHeaderShowDiv">
          <el-form-item label="API请求标头:"></el-form-item>
          <div v-for="(paramet, index) in requestHeaderArray" :key="`requestHeaderArray_${index}`">
            <el-row type="flex" justify="start" align="top">
              <el-form-item label="请求标头">
                <span class="required-label">* </span>
                <el-input v-model="paramet.parameter" placeholder="请输入请求标头" :maxlength="50" show-word-limit clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
              <el-form-item label="标头值">
                <span class="required-label">* </span>
                <el-input v-model="paramet.parameterValue" placeholder="请输入请求头值" clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
              <!-- 添加删除图标按钮 -->
              <el-form-item>
                <el-button icon="el-icon-delete" @click="removeDebugHeaderParameter(index)" circle></el-button>
              </el-form-item>
            </el-row>
          </div>
          <el-form-item>
            <el-button type="primary" size="medium" @click="addDebugHeaderParameter"> 添加请求头</el-button>
          </el-form-item>
        </div>
        <el-form-item label="API入参:"></el-form-item>
        <!-- 使用 v-for 循环渲染参数列表 -->
        <div v-for="(paramet, index) in requestParameterArray" :key="`requestParameterArray_${index}`">
          <el-row type="flex" justify="start" align="top">
            <el-form-item label="参数">
              <span class="required-label">* </span>
              <el-input v-model="paramet.parameter" placeholder="请输入参数" :maxlength="50" show-word-limit clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="值">
              <span class="required-label">* </span>
              <el-input v-model="paramet.parameterValue" placeholder="请输入参数值" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
            <div :style="{width:'15%', overflow:'hidden', whitespace:'normal'}">
              <el-form-item label="类型：">{{ getParameterTypeOptions(paramet.parameterType) }}</el-form-item>
            </div>
            <div :style="{width:'15%', overflow:'hidden', whitespace:'normal'}">
              <el-form-item label="必传：">{{ getIsMandatoryOptions(paramet.isMandatory) }}</el-form-item>
            </div>
            <div :style="{width:'20%', overflow:'hidden', whitespace:'normal'}">
              <el-form-item label="说明：" >
                <el-tooltip :content="paramet.parameterName" placement="top" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: block;">
                  <span>{{ paramet.parameterName }} </span>
                </el-tooltip>
              </el-form-item>
            </div>
            <!-- 添加删除图标按钮 -->
            <el-form-item>
              <el-button icon="el-icon-delete" @click="removeDebugInputParameter(index)" circle></el-button>
            </el-form-item>
          </el-row>
        </div>
        <el-row type="flex" justify="start" align="top">
          <el-form-item>
            <el-button type="primary" size="medium" @click="addDebugInputParameter"> 添加参数 </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="apiSendRequest"> 发送请求 </el-button>
          </el-form-item>
        </el-row>
        <!-- 使用 v-for 循环渲染参数列表 -->
        <el-form-item label="响应结果:" >
          <el-input v-model="outParameterJson" type="textarea"
                    :autosize="{minRows: 10, maxRows: 18}" :style="{width: '100%'}" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="响应码:"></el-form-item>
        <div v-for="(item, index) in responseCodes" :key="`responseCodes_${index}`" class="response-code with-background">
          <div class="code">{{ item.dictValue }}</div>
          <div class="description">{{ item.dictLabel }}</div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button @click="step7Cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
.required-label {
  color: red;
  margin-left: -11px;
}
.hide-close-button .el-dialog__headerbtn {
  display: none;
}
.fixed-width {
  width: 25%; /* You can adjust this width as needed */
  overflow: hidden;
  white-space: normal;
}
.with-background {
  background-color: #f0f0f0; /* Change this color to your preferred background color */
/*
  padding: 10px; !* Add padding for better appearance *!
*/
}
.response-code {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.code {
  font-weight: bold;
}
.description {
  flex: 1;
  margin-left: 10px;
}
</style>
<script>
import { getApiPathPrefix,listInfo, getInfo, delInfo, addInfo, updateInfo,changeApiStatus,updateInfoApipublish} from "@/api/tool/apigen";
import { getDicts  } from "@/api/tool/apigendictdata";
import { getInfoByApi,addAccess,updateAccess,updateAccessByApiId } from "@/api/tool/apiaccess";
import { getExecuteByApiId,addExecute,updateExecute,getDBType,getDBTypeDBName,getDBTypeDBnameTablename } from "@/api/tool/apiexecute";
import { postDebug,downloadDebug } from "@/api/tool/apigendebug";

export default {
  name: "Info",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      requestHeaderShowDiv: false, // 控制显示和隐藏的条件
      responseCodes: [],
      placeholderText:
      `SELECT
    表别名.字段A,
    表别名.字段B AS 字段别名B
FROM
    \`库名\`.表名 表别名
WHERE
    表别名.字段A = @条件A
AND
    表别名.字段B = @条件B
LIMIT
    @条件分页数 @条件每页条数`,
      // 新增api默认前缀
      api_path_prefix: undefined,
      // apiId 默认为0,后续api步骤需要用到
      apiId: null,
      // 当前步骤，默认为第1步
      currentStep: null,
      // 动作类型表单区分
      apiAction:null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // api服务信息表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        apiAction: null,
        apiPath: null,
        apiPathShow: null,
        apiName: null,
        apiType: null,
        apiIllustrate: null,
        apiGroup: null,
        apiVersion: null,
        apiHeader: null,
        apiPublish: null,
        status: null,
        orderByColumn: "id",
        isAsc: "desc",
      },
      // 列信息
      columns: [
        { key: 0, label: `序号`, visible: true },
        { key: 1, label: `动作`, visible: true },
        { key: 2, label: `路径`, visible: true },
        { key: 3, label: `名称`, visible: true },
        { key: 4, label: `类型`, visible: true },
        { key: 5, label: `分组`, visible: true },
        { key: 6, label: `版本`, visible: true },
        { key: 7, label: `标头`, visible: true },
        { key: 8, label: `说明`, visible: true },
        { key: 9, label: `发布`, visible: true },
        { key: 10, label: `状态`, visible: true },
        { key: 11, label: `备注`, visible: true }
      ],
      inputParameterList:[],
      requestParameterArray:[],
      requestHeaderArray:[],
      requestParameterJson:{},
      outParameterJson:null,
      requestHeaderJson:{},
      addFieldParameterList:[],
      updateFieldParameterList:[],
      conditionalFieldParameterList:[],
      outParameterList:[],
      reportNameFormatObject:{},
      // 表单参数
      formData: {
        // 存储表单数据的对象
        step1Data: {
          // 存储步骤1的表单数据
        },
        step2Data: {
          // 存储步骤2的表单数据
          enteringGinseng: null, // api入参参数列表
          id: null,
          apiId: null,
        },
        // 存储步骤3新增执行的表单数据
        step3AddData: {
          id: null,
          apiId: null,
          databaseType: null,
          databaseName: null,
          tableName: null,
          action: null,
          updateField: null,
        },
        // 存储步骤3修改执行的表单数据
        step3UpdateData: {
          id: null,
          apiId: null,
          databaseType: null,
          databaseName: null,
          tableName: null,
          action: null,
          conditional: null,
          updateField: null,
        },
        step3SelectData: {
          id: null,
          apiId: null,
          databaseType: null,
          action: null,
          sqlStatement: null,
        },
        step3ExportData: {
          id: null,
          apiId: null,
          databaseType: null,
          action: null,
          sqlStatement: null,
        },
        step4ExportData: {
          id: null,
          apiId: null,
          reportNameFormat:null
        },
        // 查询出参
        step4SelectData: {
          id: null,
          apiId: null,
          // 出参
          exoticGinseng: null,
        },
        // 报表出参
        step5ExportData: {
          id: null,
          apiId: null,
          // 出参
          exoticGinseng: null,
        },
        step6Data: {
          // 存储步骤1的表单数据
        },
        step7Data: {
          // 存储步骤1的表单数据
        },
        // ... 可能还有更多步骤的表单数据
      },

      // 表单校验
      step1DataRules: {
        apiAction: [{
          required: true,
          message: "请选择API动作",
          trigger: "change"
        }],
        apiPathShow: [{
          required: true,
          message: "请输入API路径",
          trigger: "blur"
        }],
        apiName: [{
          required: true,
          message: "请输入API名称",
          trigger: "blur"
        }],
        apiType: [{
          required: true,
          message: "请选择请求类型",
          trigger: "change"
        }],
        apiGroup: [{
          required: true,
          message: '请选择所属组',
          trigger: 'change'
        }],
        apiVersion: [{
          required: true,
          message: '请选择API版本',
          trigger: 'change'
        }],
        apiHeader: [{
          required: true,
          message: '请选择是否启用',
          trigger: 'change'
        }],
        apiIllustrate: [{
          required: true,
          message: '请输入API描述',
          trigger: 'blur'
        }],
      },
      // 添加操作执行器校验
      step3AddDataRules: {
        databaseType: [{
          required: true,
          message: '请选择数据库类型',
          trigger: 'change'
        }],
        databaseName: [{
          required: true,
          message: '请选择数据库名',
          trigger: 'change'
        }],
        tableName: [{
          required: true,
          message: '请选择表名',
          trigger: 'change'
        }],
      },
      step3UpdateDataRules: {
        databaseType: [{
          required: true,
          message: '请选择数据库类型',
          trigger: 'change'
        }],
        databaseName: [{
          required: true,
          message: '请选择数据库名',
          trigger: 'change'
        }],
        tableName: [{
          required: true,
          message: '请选择表名',
          trigger: 'change'
        }],
      },
      step3SelectDataRules: {
        databaseType: [{
          required: true,
          message: '请选择数据库类型',
          trigger: 'change'
        }],
        sqlStatement: [{
          required: true,
          message: '请输入查询sql语句',
          trigger: 'blur'
        }],
      },
      step3ExportDataRules: {
        databaseType: [{
          required: true,
          message: '请选择数据库类型',
          trigger: 'change'
        }],
        sqlStatement: [{
          required: true,
          message: '请输入导出sql语句',
          trigger: 'blur'
        }],
      },
      step4ExportDataRules: {
        fixedValue: [{
          required: true,
          message: '请输入报表前缀',
          trigger: 'blur'
        }],
        valueSource: [{
          required: true,
          message: '请选择报表后缀',
          trigger: 'change'
        }],
        fileType: [{
          required: true,
          message: '请选择文件类型',
          trigger: 'change'
        }],
      },
      /**第一步新增api信息的下拉*/
      apiTypeOptions: [{
        "label": "POST",
        "value": "POST"
      }],
      apiActionOptions: [],
      apiGroupOptions: [],
      apiVersionOptions: [],
      valueSourceExportOptions:[],
      fileTypeOptions:[],

      apiHeaderOptions: [{
        "label": "启用",
        "value": '0'
      }, {
        "label": "未启用",
        "value": '1'
      }],
      apiPublishOptions: [{
      "label": "已发布",
      "value": '0'
      }, {
      "label": "未发布",
      "value": '1'
      }],
      /**第二步新增入参的下拉*/
      parameterTypeOptions: [{
        "label": "string",
        "value": "string"
      }, {
        "label": "integer",
        "value": "integer"
      }, {
        "label": "double",
        "value": "double"
      }, {
        "label": "float",
        "value": "float"
      }],
      isMandatoryOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      /**第三步执行API的下拉*/
      databaseTypeOptions:[],
      valueSourceOptions: [{
        "label": "api入参",
        "value": 1
      }],
      databaseNameOptions:[],
      tableNameOptions:[],
      enteringGinsengOptions:[],
      columnNameOptions:[],
      // 条件判断
      conditionTypeOptions:[],
      // 运算逻辑
      logicalTypeOptions:[],
    }
  },
  created() {
    this.getList();
    // 分组
    getDicts("api_group_type").then(response => {
      this.apiGroupOptions = response.data;
    });
    // 版本
    getDicts("api_version_type").then(response => {
      this.apiVersionOptions = response.data;
    });
    // 动作
    getDicts("api_action_type").then(response => {
      this.apiActionOptions = response.data;
    });
    // 获取api前缀
    getApiPathPrefix().then(response => {
      this.api_path_prefix = response.data;
    });
  },
  methods: {

    refreshApiOptions(){
      // 分组
      getDicts("api_group_type").then(response => {
        this.apiGroupOptions = response.data;
      });
      // 版本
      getDicts("api_version_type").then(response => {
        this.apiVersionOptions = response.data;
      });
      // 动作
      getDicts("api_action_type").then(response => {
        this.apiActionOptions = response.data;
      });
    },

    getApiGroupOptions(apiGroup) {
      const match = this.apiGroupOptions.find((option) => option.dictValue === apiGroup);
      return match ? match.dictLabel : "N/A";
    },
    getApiVersionOptions(apiVersion) {
      const match = this.apiVersionOptions.find((option) => option.dictValue === apiVersion);
      return match ? match.dictLabel : "N/A";
    },
    getapiHeaderOptions(apiHeader) {
      const match = this.apiHeaderOptions.find((option) => option.value === apiHeader);
      return match ? match.label : "N/A";
    },
    getParameterTypeOptions(parameterType) {
      const match = this.parameterTypeOptions.find((option) => option.value === parameterType);
      return match ? match.label : "N/A";
    },
    getIsMandatoryOptions(isMandatory) {
      const match = this.isMandatoryOptions.find((option) => option.value === isMandatory);
      return match ? match.label : "N/A";
    },

    onTableNameChange(){
      if(this.apiAction!=null && this.apiAction=='CREATE'){
        const  dbtype = this.formData.step3AddData.databaseType;
        const  databaseName = this.formData.step3AddData.databaseName;
        const  tableName = this.formData.step3AddData.tableName;
        console.log("CREATE--->数据库类型:"+dbtype);
        console.log("CREATE--->数据库:"+databaseName);
        console.log("CREATE--->表名:"+tableName);
        this.columnNameOptions=[];
        this.addFieldParameterList=[];
        if(tableName){
          getDBTypeDBnameTablename(dbtype,databaseName,tableName).then(response => {
            this.columnNameOptions = response.data;
          });
        }
      }else if(this.apiAction!=null && this.apiAction=='UPDATE'){
        const  dbtype = this.formData.step3UpdateData.databaseType;
        const  databaseName = this.formData.step3UpdateData.databaseName;
        const  tableName = this.formData.step3UpdateData.tableName;
        console.log("UPDATE--->数据库类型:"+dbtype);
        console.log("UPDATE--->数据库:"+databaseName);
        console.log("UPDATE--->表名:"+tableName);
        this.columnNameOptions=[];
        this.conditionalFieldParameterList=[];
        this.updateFieldParameterList=[];
        if(tableName){
          getDBTypeDBnameTablename(dbtype,databaseName,tableName).then(response => {
            this.columnNameOptions = response.data;
          });
        }
      }
    },

    onDatabaseNameChange(){
      if(this.apiAction!=null && this.apiAction=='CREATE'){
        // 根据数据库类型和数据库名获取数据库中的表名
        const  dbtype = this.formData.step3AddData.databaseType;
        const  databaseName = this.formData.step3AddData.databaseName;
        console.log("CREATE--->数据库类型:"+dbtype);
        console.log("CREATE--->数据库:"+databaseName);
        this.formData.step3AddData.tableName=null;
        this.tableNameOptions=[];
        this.addFieldParameterList=[];
        this.columnNameOptions=[];
        if(databaseName){
          getDBTypeDBName(dbtype,databaseName).then(response => {
            this.tableNameOptions = response.data;
          });
        }
      }else if(this.apiAction!=null && this.apiAction=='UPDATE'){
        // 根据数据库类型和数据库名获取数据库中的表名
        const  dbtype = this.formData.step3UpdateData.databaseType;
        const  databaseName = this.formData.step3UpdateData.databaseName;
        console.log("UPDATE--->数据库类型:"+dbtype);
        console.log("UPDATE--->数据库:"+databaseName);
        this.formData.step3UpdateData.tableName=null;
        this.tableNameOptions=[];
        this.conditionalFieldParameterList=[];
        this.updateFieldParameterList=[];
        this.columnNameOptions=[];
        if(databaseName){
          getDBTypeDBName(dbtype,databaseName).then(response => {
            this.tableNameOptions = response.data;
          });
        }
      }
    },

    onDatabaseTypeChange(){
      if(this.apiAction!=null && this.apiAction=='CREATE'){
        const  dbtype = this.formData.step3AddData.databaseType;
        // 获取选择的数据库类型
        console.log("CREATE--->数据库类型:"+dbtype);
        this.formData.step3AddData.databaseName=null;
        this.databaseNameOptions=[];
        this.formData.step3AddData.tableName=null;
        this.tableNameOptions=[];
        this.addFieldParameterList=[];
        this.columnNameOptions=[];
        if (dbtype) {
          getDBType(this.formData.step3AddData.databaseType).then(response => {
            this.databaseNameOptions = response.data;
          });
        }
      }else if(this.apiAction!=null && this.apiAction=='UPDATE'){
        const  dbtype = this.formData.step3UpdateData.databaseType;
        // 获取选择的数据库类型
        console.log("UPDATE--->数据库类型:"+dbtype);
        this.formData.step3UpdateData.databaseName=null;
        this.databaseNameOptions=[];
        this.formData.step3UpdateData.tableName=null;
        this.tableNameOptions=[];
        this.conditionalFieldParameterList=[];
        this.updateFieldParameterList=[];
        this.columnNameOptions=[];
        if (dbtype) {
          getDBType(this.formData.step3UpdateData.databaseType).then(response => {
            this.databaseNameOptions = response.data;
          });
        }
      }
    },

    addFieldParameter() {
      this.addFieldParameterList.push({
        fieldName: null, // 初始化为默认值
        valueSource: null, // 初始化为默认值
        parameter: null, // 初始化为默认值
      });
    },
    addUpdateFieldParameter(){
      this.updateFieldParameterList.push({
        fieldName: null, // 字段名
        valueSource: null, // 值来源
        parameter: null, // 值
      });
    },
    addConditionalField() {
      this.conditionalFieldParameterList.push({
        fieldName: null, // 左值字段
        valueSource: null, // 值来源
        parameter: null, // 右值字段
        logicalType: null, // 逻辑运算
        conditionType: null, // 条件判断
      });
    },

    removeAddFieldParameter(index) {
      this.addFieldParameterList.splice(index, 1);
    },
    removeUpdateFieldParameter(index){
      this.updateFieldParameterList.splice(index, 1);
    },
    removeConditionalField(index) {
      // 移除指定索引的参数数据
      this.conditionalFieldParameterList.splice(index, 1);
    },

    addInputParameter() {
      // api入参添加一行空的参数数据
      this.inputParameterList.push({
        parameter: null, // 初始化为默认值
        parameterType: null, // 初始化为默认值
        parameterName: null, // 初始化为默认值
        isMandatory: null, // 初始化为默认值
      });
    },

    addDebugInputParameter(){
      // api入参添加一行空的参数数据
      this.requestParameterArray.push({
        parameter: null, // 初始化为默认值
        parameterValue: null, // 初始化为默认值
        parameterType: null, // 初始化为默认值
        parameterName: null, // 初始化为默认值
        isMandatory: null, // 初始化为默认值
      });
    },
    addDebugHeaderParameter(){
      // api入参添加一行空的参数数据
      this.requestHeaderArray.push({
        parameter: null, // 初始化为默认值
        parameterValue: null, // 初始化为默认值
      });
    },

    addOutParameter(){
      this.outParameterList.push({
        parameter: null, // 初始化为默认值
        parameterType: null, // 初始化为默认值
        parameterName: null, // 初始化为默认值
      });
    },

    // api入参移除指定索引的参数数据
    removeInputParameter(index) {
      // 移除指定索引的参数数据
      this.inputParameterList.splice(index, 1);
    },
    removeDebugInputParameter(index) {
      // 移除指定索引的参数数据
      this.requestParameterArray.splice(index, 1);
    },
    removeDebugHeaderParameter(index) {
      // 移除指定索引的参数数据
      this.requestHeaderArray.splice(index, 1);
    },
    removeOutParameterList(index){
      this.outParameterList.splice(index, 1);
    },


    /*版本apiVersion的翻译方法*/
    formatApiVersion(row) {
      const match = this.apiVersionOptions.find((option) => option.dictValue === row.apiVersion);
      return match ? match.dictLabel : "N/A";
    },
    /*分组ApiGroup的翻译方法*/
    formatApiGroup(row) {
      const match = this.apiGroupOptions.find((option) => option.dictValue === row.apiGroup);
      return match ? match.dictLabel : "N/A";
    },
    /*动作apiAction的翻译方法*/
    formatApiAction(row) {
      const match = this.apiActionOptions.find((option) => option.dictValue === row.apiAction);
      return match ? match.dictLabel : "N/A";
    },
    /*是否携带请求头的翻译方法*/
    formatapiHeader(row) {
      const match = this.apiHeaderOptions.find((option) => option.value === row.apiHeader);
      return match ? match.label : "N/A";
    },
    /*是否发布的翻译方法*/
    formatApiPublish(row) {
      const match = this.apiPublishOptions.find((option) => option.value === row.apiPublish);
      return match ? match.label : "N/A";
    },

    /** 查询api服务信息列表 */
    getList() {
      this.loading = true;
      listInfo(this.queryParams).then(response => {
        this.infoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.apiName + '"接口？').then(function() {
        return changeApiStatus(row.id, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    // 取消按钮
    step1Cancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step1Reset();
    },
    step2Cancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step2Reset();
    },

    step3AddDataCancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step3AddDataReset();
    },
    step3UpdateDataCancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step3UpdateDataReset();
    },
    step3SelectDataCancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step3SelectDataReset();
    },
    step3ExportDataCancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step3ExportDataReset();
    },
    step4ExportDataCancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step4ExportDataReset();
    },
    step4SelectDataCancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step4SelectDataReset();
    },
    step5ExportDataCancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step5ExportDataReset();
    },
    step6Cancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step6Reset();
    },
    step7Cancel() {
      this.open = false;
      this.currentStep = null;
      this.apiId = null;
      this.apiAction = null;
      this.step7Reset();
    },
    // 表单重置
    step1Reset() {
      this.formData.step1Data = {
        id: null,
        apiAction: null,
        apiPath: null,
        apiPathShow: null,
        apiName: null,
        apiType: null,
        apiIllustrate: null,
        apiGroup: null,
        apiVersion: null,
        apiHeader: null,
        apiPublish: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("formData.step1Data");
    },

    step2Reset() {
        this.inputParameterList = [],
        this.formData.step2Data = {
        enteringGinseng: null, // api入参参数列表
        id: null,
        apiId: null,
      };
      this.resetForm("formData.step2Data");
      this.getList();
    },
    step3AddDataReset() {
      this.addFieldParameterList = [];
      this.formData.step3AddData = {
        id: null,
        apiId: null,
        databaseType: null,
        databaseName: null,
        tableName: null,
        action: null,
        updateField: null,
      };
      this.resetForm("formData.step3AddData");
      this.getList();
    },

    step3UpdateDataReset() {
      this.updateFieldParameterList=[];
      this.conditionalFieldParameterList=[];
      this.formData.step3UpdateData ={
        id: null,
        apiId: null,
        databaseType: null,
        databaseName: null,
        tableName: null,
        action: null,
        conditional: null,
        updateField: null,
      };
      this.resetForm("formData.step3UpdateData");
      this.getList();
    },
    step3SelectDataReset() {
      this.formData.step3SelectData ={
        id: null,
        apiId: null,
        databaseType: null,
        action: null,
        sqlStatement: null,
      };
      this.resetForm("formData.step3SelectData");
      this.getList();
    },
    step3ExportDataReset() {
      this.formData.step3ExportData ={
        id: null,
        apiId: null,
        databaseType: null,
        action: null,
        sqlStatement: null,
      };
      this.resetForm("formData.step3ExportData");
      this.getList();
    },
    step4ExportDataReset() {
      this.reportNameFormatObject={};
      this.formData.step4ExportData ={
        id: null,
        apiId: null,
        reportNameFormat:null,
      };
      this.resetForm("formData.step4ExportData");
      this.getList();
    },
    step4SelectDataReset() {
      this.outParameterList=[];
      this.formData.step4SelectData ={
        id: null,
        apiId: null,
        // 出参
        exoticGinseng: null,
      };
      this.resetForm("formData.step4SelectData");
      this.getList();
    },
    step5ExportDataReset() {
      this.outParameterList=[];
      this.formData.step5ExportData ={
        id: null,
        apiId: null,
        // 出参
        exoticGinseng: null,
      };
      this.resetForm("formData.step5ExportData");
      this.getList();
    },
    step6Reset() {
      this.outParameterList=[];
      this.inputParameterList=[];
      this.formData.step6Data = {
        id: null,
        apiAction: null,
        apiPath: null,
        apiPathShow: null,
        apiName: null,
        apiType: null,
        apiIllustrate: null,
        apiGroup: null,
        apiVersion: null,
        apiHeader: null,
        apiPublish: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("formData.step6Data");
    },
    step7Reset() {
      this.requestHeaderArray=[];
      this.requestParameterArray=[];
      this.outParameterJson=null;
      this.formData.step7Data = {
        id: null,
        apiAction: null,
        apiPath: null,
        apiPathShow: null,
        apiName: null,
        apiType: null,
        apiIllustrate: null,
        apiGroup: null,
        apiVersion: null,
        apiHeader: null,
        apiPublish: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("formData.step7Data");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.step1Cancel();
      this.open = true;
      this.currentStep = 1;
      this.title = "添加API服务信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.step1Cancel();
      const id = row.id || this.ids
      getInfo(id).then(response => {
        this.formData.step1Data = response.data;
        this.apiId = this.formData.step1Data.id;
        this.apiAction = this.formData.step1Data.apiAction;
        this.formData.step1Data.apiPath=this.formData.step1Data.apiPathShow;
        this.open = true;
        this.currentStep = 1;
        this.title = "修改API服务信息";
      });
    },

    // 出入参和报表设置详情
    entryAndExitGinseng(row){
      this.step6Cancel();
      const id = row.id || this.ids
      getInfo(id).then(response => {
        this.formData.step6Data = response.data;
        this.apiId = this.formData.step6Data.id;
        this.apiAction = this.formData.step6Data.apiAction;
        this.open = true;
        this.currentStep = 6;
        this.title = "API出入参信息";
      });
      getInfoByApi(id).then(response => {
        if(response.data){
          // 非空就修改操作
          this.inputParameterList = JSON.parse(response.data.enteringGinseng);
          this.outParameterList = JSON.parse(response.data.exoticGinseng);
        }
      });
      // 响应码类型
      getDicts("responsecode_type").then(response => {
        this.responseCodes = response.data;
      });
    },

    // api接口调试
    debugApiInterface(row){
      this.step7Cancel();
      const id = row.id || this.ids
      getInfo(id).then(response => {
        this.formData.step7Data = response.data;
        this.apiId = this.formData.step7Data.id;
        this.apiAction = this.formData.step7Data.apiAction;

        if(this.formData.step7Data.apiHeader==='0'){
          this.requestHeaderShowDiv=true;
        }
        if(this.formData.step7Data.apiPublish==="1"){
          this.$message({ message: '接口"'+this.formData.step7Data.apiName+'"未发布', type: 'warning' })
          return false
        }else{
          this.open = true;
          this.currentStep = 7;
          this.title = "API接口调试";
        }
        getInfoByApi(id).then(response => {
          if(response.data){
            // 非空就修改操作
            this.requestParameterArray = JSON.parse(response.data.enteringGinseng);
            console.log("requestParameterArray="+JSON.stringify(this.requestParameterArray))
          }
        });
        // 响应码类型
        getDicts("responsecode_type").then(response => {
          this.responseCodes = response.data;
        });
      });
    },

    /** 新增api下一步 */
    saveStep1DataAndNext() {
      this.$refs["step1Data"].validate(valid => {
        if (valid) {
          let apiPathShow = this.formData.step1Data.apiPathShow;
          let apiGroup = this.formData.step1Data.apiGroup;
          let apiVersion = this.formData.step1Data.apiVersion;
          this.formData.step1Data.apiPath = this.api_path_prefix+apiPathShow+"/"+apiGroup+"/"+apiVersion;
          if (this.formData.step1Data.id != null) {
            this.apiId = this.formData.step1Data.id;
            this.apiAction=this.formData.step1Data.apiAction;
            updateInfo(this.formData.step1Data).then(response => {
              this.$modal.msgSuccess("修改成功");
              // 查询api入参
              this.getInfoByApi(this.formData.step1Data.id);
            });
          } else {
            this.step2Cancel();
            addInfo(this.formData.step1Data).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.apiId = response.data;
              console.log("新增成功返回的apiId="+this.apiId);
              // 为操作动作赋值
              this.apiAction=this.formData.step1Data.apiAction;
              this.currentStep = 2;
              this.title = "添加API入参信息";
              this.open = true;
            });
          }
        }
      });
    },

    /*修改api入参*/
    getInfoByApiOut(id){
      this.step4SelectDataReset();
      getInfoByApi(id).then(response => {
        if(response.data){
          this.formData.step4SelectData = response.data;
          // 非空就修改操作
          let exoticGinseng = this.formData.step4SelectData.exoticGinseng;
          const exoticGinsengArray = JSON.parse(exoticGinseng);
          console.log("exoticGinsengArray"+exoticGinsengArray);
          if(exoticGinsengArray){
            this.outParameterList = exoticGinsengArray;
            this.currentStep = 4;
            this.open = true;
            this.title = "修改API出参信息";
          }else{
            this.outParameterList=[];
            // 为空就添加操作
            this.currentStep = 4;
            this.open = true;
            this.title = "添加API出参信息";
          }
        }else{
          // 为空就添加操作
          this.currentStep = 4;
          this.open = true;
          this.title = "添加API出参信息";
        }
      });
    },

    getInfoByApiExportOut(id){
      this.step5ExportDataReset();
      getInfoByApi(id).then(response => {
        if(response.data){
          this.formData.step5ExportData = response.data;
          // 非空就修改操作
          let exoticGinseng = this.formData.step5ExportData.exoticGinseng;
          const exoticGinsengArray = JSON.parse(exoticGinseng);
          console.log("exoticGinsengArray"+exoticGinsengArray);
          if(exoticGinsengArray){
            this.outParameterList = exoticGinsengArray;
            this.currentStep = 5;
            this.open = true;
            this.title = "修改API出参信息";
          }else{
            this.outParameterList=[];
            // 为空就添加操作
            this.currentStep = 5;
            this.open = true;
            this.title = "添加API出参信息";
          }
        }else{
          // 为空就添加操作
          this.currentStep = 5;
          this.open = true;
          this.title = "添加API出参信息";
        }
      });
    },

    getInfoByApiExportName(id){
      this.step4ExportDataReset();
      getDicts("value_source_export").then(response => {
        this.valueSourceExportOptions = response.data;
      });
      getDicts("file_type").then(response => {
        this.fileTypeOptions = response.data;
      });
      getInfoByApi(id).then(response => {
        if(response.data){
          this.formData.step4ExportData = response.data;
          // 非空就修改操作
          let reportNameFormat = this.formData.step4ExportData.reportNameFormat;
          console.log("reportNameFormat"+reportNameFormat);
          if(reportNameFormat){
            this.reportNameFormatObject = JSON.parse(reportNameFormat);
            this.currentStep = 4;
            this.open = true;
            this.title = "修改报表名称信息";
          }else{
            // 为空就添加操作
            this.currentStep = 4;
            this.open = true;
            this.title = "设置报表名称信息";
          }
        }else{
          // 为空就添加操作
          this.currentStep = 4;
          this.open = true;
          this.title = "设置报表名称信息";
        }
      });
    },

    /*修改api入参*/
    getInfoByApi(id){
      this.step2Reset();
      getInfoByApi(id).then(response => {
        if(response.data){
          this.formData.step2Data = response.data;
          // 非空就修改操作
          let enteringGinseng = this.formData.step2Data.enteringGinseng;
          this.inputParameterList = JSON.parse(enteringGinseng);
          this.currentStep = 2;
          this.open = true;
          this.title = "修改API入参信息";
        }else{
          // 为空就添加操作
          this.currentStep = 2;
          this.open = true;
          this.title = "添加API入参信息";
        }
      });
    },

    /**api入参设置修改 */
    saveStep2DataAndNext() {
      console.log("inputParameterList="+JSON.stringify(this.inputParameterList));
      if(this.inputParameterList.length === 0){
        this.$message.error(`请输入API入参信息`);
        return;
      }
      let hasError = this.inputParameterList.some((paramet, index) => {
        if (!paramet.parameter) {
          this.$message.error(`第 ${index + 1} 行 请输入参数`);
          return true; // 返回 true 表示有错误，终止循环
        } else if (!paramet.parameterType) {
          this.$message.error(`第 ${index + 1} 行 请选择参数类型`);
          return true;
        } else if (!paramet.parameterName) {
          this.$message.error(`第 ${index + 1} 行 请输入参数名称`);
          return true;
        } else if (!paramet.isMandatory) {
          this.$message.error(`第 ${index + 1} 行 请选择是否必传`);
          return true;
        }
        return false; // 没有错误，继续循环
      });
      // 如果 hasError 为 true，则表示出现错误，不再执行后面的代码
      if (hasError) {
        return;
      }
      // 值的下拉
      this.enteringGinsengOptions=this.inputParameterList;
      getDicts("condition_type").then(response => {
        this.conditionTypeOptions = response.data;
      });
      getDicts("logical_type").then(response => {
        this.logicalTypeOptions = response.data;
      });
      // 获取数据库类型下拉
      getDicts("data_source_type").then(response => {
        this.databaseTypeOptions = response.data;
      });
      // enteringGinseng
      this.formData.step2Data.enteringGinseng=JSON.stringify(this.inputParameterList);
      this.formData.step2Data.apiId=this.apiId;
      if(this.formData.step2Data.id){
        // api_gen_access的id不为空说明是需要做修改操作
        updateAccess(this.formData.step2Data).then(response => {
          this.$modal.msgSuccess("修改成功");
          // 保存成功，进入下一步
          this.getExecuteByApiId(this.apiId);
        });
      }else{
        // 保存入参操作
        addAccess(this.formData.step2Data).then(response => {
          this.$modal.msgSuccess("新增成功");
          // 保存成功，进入下一步
          this.getExecuteByApiId(this.apiId);
        });
      }
    },

    /*获取执行信息*/
    getExecuteByApiId(apiId){
      if(this.apiAction!=null && this.apiAction=='CREATE'){
        this.step3AddDataReset();
        getExecuteByApiId(apiId).then(response => {
          if(response.data){
            this.formData.step3AddData = response.data;
            // 非空就修改操作
            let updateField = this.formData.step3AddData.updateField;
            this.addFieldParameterList = JSON.parse(updateField);
            let databaseType = this.formData.step3AddData.databaseType;
            let databaseName = this.formData.step3AddData.databaseName;
            let tableName = this.formData.step3AddData.tableName;
            getDBType(databaseType).then(response => {
              this.databaseNameOptions = response.data;
            });
            getDBTypeDBName(databaseType,databaseName).then(response => {
              this.tableNameOptions = response.data;
            });
            getDBTypeDBnameTablename(databaseType,databaseName,tableName).then(response => {
              this.columnNameOptions = response.data;
            });
            this.currentStep = 3;
            this.title = "修改API执行信息";
            this.open = true;
          }else{
            // 为空就添加操作
            this.currentStep = 3;
            this.title = "添加API执行信息";
            this.open = true;
          }
        });
      }else if(this.apiAction!=null && this.apiAction=='UPDATE'){
        this.step3UpdateDataReset();
        getExecuteByApiId(apiId).then(response => {
          if(response.data){
            this.formData.step3UpdateData = response.data;
            // 非空就修改操作
            let updateField = this.formData.step3UpdateData.updateField;
            this.updateFieldParameterList = JSON.parse(updateField);
            let conditional = this.formData.step3UpdateData.conditional;
            this.conditionalFieldParameterList = JSON.parse(conditional);
            let databaseType = this.formData.step3UpdateData.databaseType;
            let databaseName = this.formData.step3UpdateData.databaseName;
            let tableName = this.formData.step3UpdateData.tableName;
            getDBType(databaseType).then(response => {
              this.databaseNameOptions = response.data;
            });
            getDBTypeDBName(databaseType,databaseName).then(response => {
              this.tableNameOptions = response.data;
            });
            getDBTypeDBnameTablename(databaseType,databaseName,tableName).then(response => {
              this.columnNameOptions = response.data;
            });
            this.currentStep = 3;
            this.title = "修改API执行信息";
            this.open = true;
          }else{
            // 为空就添加操作
            this.currentStep = 3;
            this.title = "添加API执行信息";
            this.open = true;
          }
        });
      }else if(this.apiAction!=null && this.apiAction=='SELECT'){
        this.step3SelectDataReset();
        getExecuteByApiId(apiId).then(response => {
          if(response.data){
            this.formData.step3SelectData = response.data;
            // 非空就修改操作
            this.currentStep = 3;
            this.title = "修改API执行信息";
            this.open = true;
          }else{
            // 为空就添加操作
            this.currentStep = 3;
            this.title = "添加API执行信息";
            this.open = true;
          }
        });
      }else if(this.apiAction!=null && this.apiAction=='EXPORT'){
        this.step3ExportDataReset();
        getExecuteByApiId(apiId).then(response => {
          if(response.data){
            this.formData.step3ExportData = response.data;
            // 非空就修改操作
            this.currentStep = 3;
            this.title = "修改API执行信息";
            this.open = true;
          }else{
            // 为空就添加操作
            this.currentStep = 3;
            this.title = "添加API执行信息";
            this.open = true;
          }
        });
      }
    },

    /**api入参设置修改的上一步*/
    saveStep2DataAndUp(){
      this.step1Reset();
      getInfo(this.apiId).then(response => {
        this.formData.step1Data = response.data;
        this.open = true;
        this.title = "修改API服务信息";
        this.currentStep = 1;
      });
    },

    step4SelectDataUp(){
      this.step3SelectDataReset();
      getExecuteByApiId(this.apiId).then(response => {
        if(response.data){
          this.formData.step3SelectData = response.data;
          // 非空就修改操作
          this.currentStep = 3;
          this.title = "修改API执行信息";
          this.open = true;
        }else{
          // 为空就添加操作
          this.currentStep = 3;
          this.title = "添加API执行信息";
          this.open = true;
        }
      });
    },

    step5ExportDataUp(){
      // 报表名称
      this.getInfoByApiExportName(this.apiId);
    },

    step4ExportDataUp(){
      this.getExecuteByApiId(this.apiId);
    },

    /**api执行修改的上一步*/
    saveStep3DataAndUp(){
      this.getInfoByApi(this.apiId);
    },

    step3SelectDataNext(){
      this.$refs["step3SelectData"].validate(valid => {
        if (valid) {
          this.formData.step3SelectData.apiId = this.apiId;
          this.formData.step3SelectData.action = this.apiAction;
          // 为编写的sql在换行前面加上空格保证sql正常执行
          this.formData.step3SelectData.sqlStatement=this.formatSqlStatement(this.formData.step3SelectData.sqlStatement);
          if (this.formData.step3SelectData.id != null) {
            updateExecute(this.formData.step3SelectData).then(response => {
              this.$modal.msgSuccess("修改成功");
              // 查询api出参
              this.getInfoByApiOut(this.apiId);
            });
          } else {
            addExecute(this.formData.step3SelectData).then(response => {
              this.$modal.msgSuccess("新增成功");
              // 查询api出参
              this.getInfoByApiOut(this.apiId);
            });
          }
        }
      });
    },

    // 为编写的sql在换行前面加上空格保证sql正常执行
    formatSqlStatement(sqlStatement){
      const sqlLines = sqlStatement.split('\n');
      const formattedLines = sqlLines.map(line => {
        if (!/^(\s+)/.test(line)) {  // 如果行的开头没有空格
          return ` ${line}`;  // 添加一个空格
        }
        return line; // 行的开头已经有空格，不做改变
      });
      const joinsqlStatement = formattedLines.join('\n');
      console.log("执行sql:" + joinsqlStatement);
      return joinsqlStatement;
    },


    step3ExportDataNext(){
      this.$refs["step3ExportData"].validate(valid => {
        if (valid) {
          this.formData.step3ExportData.apiId = this.apiId;
          this.formData.step3ExportData.action = this.apiAction;
          // 为编写的sql在换行前面加上空格保证sql正常执行
          this.formData.step3ExportData.sqlStatement=this.formatSqlStatement(this.formData.step3ExportData.sqlStatement);
          if (this.formData.step3ExportData.id != null) {
            updateExecute(this.formData.step3ExportData).then(response => {
              this.$modal.msgSuccess("修改成功");
              // 报表名称
              this.getInfoByApiExportName(this.apiId);
            });
          } else {
            addExecute(this.formData.step3ExportData).then(response => {
              this.$modal.msgSuccess("新增成功");
              // 报表名称设置
              this.getInfoByApiExportName(this.apiId);
            });
          }
        }
      });
    },

    step4ExportDataNext(){
      this.$refs["step4ExportData"].validate(valid => {
        if (valid) {
          this.formData.step4ExportData.apiId = this.apiId;
          if (this.formData.step4ExportData.reportNameFormat != null) {
            this.formData.step4ExportData.reportNameFormat=JSON.stringify(this.reportNameFormatObject);
            updateAccessByApiId(this.formData.step4ExportData).then(response => {
              this.$modal.msgSuccess("修改成功");
              // api出参
              this.getInfoByApiExportOut(this.apiId);
            });
          } else {
            this.formData.step4ExportData.reportNameFormat=JSON.stringify(this.reportNameFormatObject);
            updateAccessByApiId(this.formData.step4ExportData).then(response => {
              this.$modal.msgSuccess("新增成功");
              // api出参
              this.getInfoByApiExportOut(this.apiId);
            });
          }
        }
      });
    },

    step4SelectDataComplete(){
      console.log("outParameter="+JSON.stringify(this.outParameterList));
      if(this.outParameterList.length === 0){
        this.$message.error(`请添加API出参信息`);
        return;
      }
      let hasError = this.outParameterList.some((paramet, index) => {
        if (!paramet.parameter) {
          this.$message.error(`第 ${index + 1} 行 请输入出参字段`);
          return true;
        } else if (!paramet.parameterType) {
          this.$message.error(`第 ${index + 1} 行 请选择参数类型`);
          return true;
        }
        return false;
      });
      // 如果 hasError 为 true，则表示出现错误，不再执行后面的代码
      if (hasError) {
        return;
      }
      this.formData.step4SelectData.exoticGinseng=JSON.stringify(this.outParameterList);
      this.formData.step4SelectData.apiId=this.apiId;
      if(this.formData.step4SelectData.id){
        updateAccessByApiId(this.formData.step4SelectData).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.updateApiPublish();
          this.step4SelectDataCancel();
        });
      }else{
        // 前面有了入参和出参是同一张表这儿使用apiId唯一性来修改
        updateAccessByApiId(this.formData.step4SelectData).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.updateApiPublish();
          this.step4SelectDataCancel();
        });
      }
    },

    /*发送调试请求*/
    apiSendRequest(){
      // 启用请求头
      this.requestHeaderJson={};
      this.requestParameterJson={};
      this.outParameterJson=null;
      if(this.formData.step7Data.apiHeader==='0'){
        console.log("requestHeaderArray="+JSON.stringify(this.requestHeaderArray));
        if(this.requestHeaderArray.length === 0){
          this.$message.error(`请添加请求头`);
          return;
        }
        let hasError = this.requestHeaderArray.some((paramet, index) => {
          if (!paramet.parameter) {
            this.$message.error(`第 ${index + 1} 行 请输入请求头`);
            return true; // 返回 true 表示有错误，终止循环
          } else if (!paramet.parameterValue) {
            this.$message.error(`第 ${index + 1} 行 请输入请求头值`);
            return true;
          }
          return false;
        });
        // 如果 hasError 为 true，则表示出现错误，不再执行后面的代码
        if (hasError) {
          return;
        }else{
          // requestHeaderArray 转为 requestHeaderJson 请求参数
          this.requestHeaderArray.some((paramet, index) => {
            this.$set(this.requestHeaderJson, paramet.parameter, paramet.parameterValue);
          });
          console.log("requestHeaderJson="+JSON.stringify(this.requestHeaderJson));
        }
      }

      console.log("requestParameterArray="+JSON.stringify(this.requestParameterArray));
      if(this.requestParameterArray.length === 0){
        this.$message.error(`请添加API入参`);
        return;
      }
      let hasError = this.requestParameterArray.some((paramet, index) => {
        if (!paramet.parameter) {
          this.$message.error(`第 ${index + 1} 行 请输入参数`);
          return true; // 返回 true 表示有错误，终止循环
        } else if (!paramet.parameterValue) {
          this.$message.error(`第 ${index + 1} 行 请输入参数值`);
          return true;
        }
        return false;
      });
      // 如果 hasError 为 true，则表示出现错误，不再执行后面的代码
      if (hasError) {
        return;
      }else{
        // requestParameterArray 转为 requestParameterJson 请求参数
        this.requestParameterArray.some((paramet, index) => {
          let parsedValue;
          switch (paramet.parameterType) {
            case 'integer':
              parsedValue = parseInt(paramet.parameterValue);
              console.log("integer="+parsedValue);
              if(isNaN(parsedValue)){
                parsedValue = paramet.parameterValue.toString();
                console.log("integer解析失败默认转换为string="+parsedValue);
              }
              break;
            case 'double':
              // Handle different number types (integer, double, float)
              parsedValue = parseFloat(paramet.parameterValue);
              console.log("double="+parsedValue);
              if(isNaN(parsedValue)){
                parsedValue = paramet.parameterValue.toString();
                console.log("double解析失败默认转换为string="+parsedValue);
              }
              break;
            case 'float':
              // Handle different number types (integer, double, float)
              parsedValue = parseFloat(paramet.parameterValue);
              console.log("float="+parsedValue);
              if(isNaN(parsedValue)){
                parsedValue = paramet.parameterValue.toString();
                console.log("float解析失败默认转换为string="+parsedValue);
              }
              break;
            // string
            default:
              parsedValue = paramet.parameterValue.toString();
              console.log("string="+parsedValue);
          }
          this.$set(this.requestParameterJson, paramet.parameter, parsedValue);
        });
        console.log("requestParameterJson="+JSON.stringify(this.requestParameterJson));
      }

      if(this.apiAction!=null && this.apiAction=='EXPORT'){
        this.$set(this.requestHeaderJson, 'Content-Type', 'application/x-www-form-urlencoded');
        downloadDebug(this.formData.step7Data.apiPath, this.requestHeaderJson,this.requestParameterJson).then(response => {
          // 接收返回结果
          this.outParameterJson = "下载成功"
        }).catch(error => {
          console.error("Error:", error);
          // 清空 outParameterJson 或设置错误信息
          this.outParameterJson = JSON.stringify(error, null, 2);
        });
      }else{
        postDebug(this.formData.step7Data.apiPath,this.requestHeaderJson,this.requestParameterJson).then(response => {
          console.log("response="+JSON.stringify(response));
          // 接收返回结果
          this.outParameterJson = JSON.stringify(response, null, 2);
        }).catch(error => {
          console.error("Error:", error);
          // 清空 outParameterJson 或设置错误信息
          this.outParameterJson = JSON.stringify(error, null, 2);
        });
      }
    },

    step5ExportDataComplete(){
      console.log("outParameter="+JSON.stringify(this.outParameterList));
      if(this.outParameterList.length === 0){
        this.$message.error(`请添加API出参信息`);
        return;
      }
      let hasError = this.outParameterList.some((paramet, index) => {
        if (!paramet.parameter) {
          this.$message.error(`第 ${index + 1} 行 请输入出参字段`);
          return true;
        } else if (!paramet.parameterType) {
          this.$message.error(`第 ${index + 1} 行 请选择参数类型`);
          return true;
        } else if (!paramet.parameterName) {
          this.$message.error(`第 ${index + 1} 行 请输入报表字段`);
          return true;
        }
        return false;
      });
      // 如果 hasError 为 true，则表示出现错误，不再执行后面的代码
      if (hasError) {
        return;
      }
      this.formData.step5ExportData.exoticGinseng=JSON.stringify(this.outParameterList);
      this.formData.step5ExportData.apiId=this.apiId;
      if(this.formData.step5ExportData.id){
        updateAccessByApiId(this.formData.step5ExportData).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.updateApiPublish();
          this.step5ExportDataCancel();
        });
      }else{
        // 前面有了入参和出参是同一张表这儿使用apiId唯一性来修改
        updateAccessByApiId(this.formData.step5ExportData).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.updateApiPublish();
          this.step5ExportDataCancel();
        });
      }
    },

    /**api执行添加 */
    step3AddComplete() {
      this.$refs["step3AddData"].validate(valid => {
        if (valid) {
          console.log("addFieldParameterList="+JSON.stringify(this.addFieldParameterList));
          if(this.addFieldParameterList.length === 0){
            this.$message.error(`请输入字段信息`);
            return;
          }
          let hasError = this.addFieldParameterList.some((paramet, index) => {
            if (!paramet.fieldName) {
              this.$message.error(`第 ${index + 1} 行 请选择字段名`);
              return true; // 返回 true 表示有错误，终止循环
            } else if (!paramet.valueSource) {
              this.$message.error(`第 ${index + 1} 行 请选择值来源`);
              return true;
            } else if (!paramet.parameter) {
              this.$message.error(`第 ${index + 1} 行 请选择值`);
              return true;
            }
            return false; // 没有错误，继续循环
          });
          // 如果 hasError 为 true，则表示出现错误，不再执行后面的代码
          if (hasError) {
            return;
          }
          // enteringGinseng
          this.formData.step3AddData.updateField=JSON.stringify(this.addFieldParameterList);
          this.formData.step3AddData.apiId=this.apiId;
          this.formData.step3AddData.action=this.apiAction;
          if(this.formData.step3AddData.id){
            // step3AddData的id不为空说明是需要做修改操作
            updateExecute(this.formData.step3AddData).then(response =>{
              this.$modal.msgSuccess("修改成功");
              this.updateApiPublish();
              this.step4SelectDataCancel();
            });
          }else{
            addExecute(this.formData.step3AddData).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.updateApiPublish();
              this.step4SelectDataCancel();
            });
          }
        }else{
          this.$message.error(`请完善信息`);
          return;
        }
      });
    },

    step3UpdateComplete() {
      this.$refs["step3UpdateData"].validate(valid => {
        if (valid) {
          console.log("conditionalFieldParameterList="+this.conditionalFieldParameterList);
          if(this.conditionalFieldParameterList.length === 0){
            this.$message.error(`请输入条件信息`);
            return;
          }
          let hasError = this.conditionalFieldParameterList.some((paramet, index) => {
            if (!paramet.fieldName) {
              this.$message.error(`条件字段 第 ${index + 1} 行 请选择左值字段`);
              return true; // 返回 true 表示有错误，终止循环
            }else if (!paramet.conditionType) {
              this.$message.error(`条件字段 第 ${index + 1} 行 请选择条件判断`);
              return true;
            } else if (!paramet.valueSource) {
              this.$message.error(`条件字段 第 ${index + 1} 行 请选择右值来源`);
              return true;
            } else if (!paramet.parameter) {
              this.$message.error(`条件字段 第 ${index + 1} 行 请选择值`);
              return true;
            } else if (!paramet.logicalType) {
              this.$message.error(`条件字段 第 ${index + 1} 行 请逻辑运算`);
              return true;
            }
            return false; // 没有错误，继续循环
          });
          // 如果 hasError 为 true，则表示出现错误，不再执行后面的代码
          if (hasError) {
            return;
          }
          console.log("updateFieldParameterList="+JSON.stringify(this.updateFieldParameterLis));
          if(this.updateFieldParameterList.length === 0){
            this.$message.error(`请输入字段信息`);
            return;
          }
          let hasError2 = this.updateFieldParameterList.some((paramet, index) => {
            if (!paramet.fieldName) {
              this.$message.error(`更新字段 第 ${index + 1} 行 请选择字段名`);
              return true; // 返回 true 表示有错误，终止循环
            } else if (!paramet.valueSource) {
              this.$message.error(`更新字段 ${index + 1} 行 请选择值来源`);
              return true;
            } else if (!paramet.parameter) {
              this.$message.error(`更新字段 ${index + 1} 行 请选择值`);
              return true;
            }
            return false; // 没有错误，继续循环
          });
          // 如果 hasError 为 true，则表示出现错误，不再执行后面的代码
          if (hasError2) {
            return;
          }
          // enteringGinseng
          this.formData.step3UpdateData.conditional=JSON.stringify(this.conditionalFieldParameterList);
          this.formData.step3UpdateData.updateField=JSON.stringify(this.updateFieldParameterList);
          this.formData.step3UpdateData.apiId=this.apiId;
          this.formData.step3UpdateData.action=this.apiAction;
          if(this.formData.step3UpdateData.id){
            // step3AddData的id不为空说明是需要做修改操作
            updateExecute(this.formData.step3UpdateData).then(response =>{
              this.$modal.msgSuccess("修改成功");
              this.updateApiPublish();
              this.step3UpdateDataCancel();
            });
          }else{
            addExecute(this.formData.step3UpdateData).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.updateApiPublish();
              this.step3UpdateDataCancel();
            });
          }
        }else{
          this.$message.error(`请完善信息`);
          return;
        }
      });
    },

    updateApiPublish(){
      // api状态改为已发布 （0已发布 1未发布）
      updateInfoApipublish(this.apiId,0).then(response => {
        this.$modal.msgSuccess("发布成功");
        this.getList();
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除api服务信息编号为"' + ids + '"的数据项？').then(function() {
        return delInfo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('apigeneration/info/export', {
        ...this.queryParams
      }, `info_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
